<script>

import ImageWithUpload from '@/components/ImageWithUpload/default'

export const FormStruct = {
  name: '',
  expireDate: null,
  attachment: null
}

export default {
  components: {
    ImageWithUpload
  },
  props: {
    value: {
      type: Object,
      required: true,
      default() {
        return null
      }
    }
  },
  data() {
    return {
      validate: null, // Form 的校验函数
      resetFields: null, // 重置函数
      formRules: {
        name: [
          { required: true, message: '请输入证书名称', trigger: ['change', 'blur'] }
        ],
        expireDate: [
          {
            validator(rule, value, callback) {
              if (value instanceof Date) { return callback() }

              callback(new Error('请选择过期时间'))
            },
            required: true,
            trigger: ['change', 'blur']
          }
        ],
        attachment: [
          {
            validator(rule, value, callback) {
              if (typeof value !== 'string' || value.trim() === '') { return callback(new Error('请上传附件')) }

              return callback()
            },
            type: 'object',
            required: true,
            trigger: ['change', 'blur']
          }
        ]
      },
      styles: {
        height: '120px',
        width: '120px',
        borderRadius: '6px'
      }
    }
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(form) {
        this.$emit('input', { ...form })
      }
    },
    attrs() {
      const attrs = { ...this.$attrs }

      attrs['model'] = this.form
      attrs['rules'] = this.formRules

      const unnecessaryAttrs = [
        'layout'
      ]

      for (const attr of unnecessaryAttrs) { delete attrs[attr] }

      return attrs
    },
    colSpan() {
      return this.layout === 'horizontal' ? 12 : 24
    }
  },
  mounted() {
    this.validate = this.$refs.form?.validate
    this.resetFields = this.$refs.form?.resetFields
  },
  methods: {
    valid() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          if (!valid) resolve(false)
          resolve(true)
        })
      })
    }
  }
}
</script>

<template>
  <div class="cert-container">
    <el-form
      ref="form"
      v-bind="attrs"
    >

      <el-row :gutter="36">
        <el-col :span="colSpan">
          <el-form-item label="证书名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请填写证书名称"
            />
          </el-form-item>

          <el-form-item label="到期时间" prop="expireDate">
            <el-date-picker
              v-model="form.expireDate"
              placeholder="请选择到期时间"
              type="date"
              style="width: 100%;"
            />
          </el-form-item>

          <el-form-item label="附件" prop="attachment">
            <ImageWithUpload v-model="form.attachment" :style="styles" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<style lang="scss">
</style>
